<template>
	<view class="container">

		<!--头部滚动条-->
		<view class="topTitle">
			<scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item, index) in navList" :key="index" @tap="switchTab(index)"
					:class="[currentIndex==index?'active':'nav-item']">
					{{ item.text }}
				</view>
			</scroll-view>
			<view class="rightSeclect">
				<text class="mrpx">默认排序</text>
				<image src="../../../../static/icon/icon_seclect.png" class="seclectIcon"></image>
			</view>
		</view>
		<!--列表-->
		<view v-for="(item, index) in couponList" class="couponListBg" :style="index>0?'margin-top: 100rpx;':''"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			
			<view class="itemCenter">

				<view style="width: 30%;">
					<view class="itemOneText">¥<text class="itemOneTextMoney">{{item.money}}</text></view>
					<view class="itemTwoText">{{item.content}}</view>
				</view>
				<view style="width: 50%;">
					<view class="itemOneTextCenter">{{item.title}}</view>
					<view class="itemTwoTextCenter">{{item.time}}</view>
				</view>
				<view class="rightUse" @click="userClick(item)">
					<text>使用</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: '', // 触摸起始点横坐标
				deltaX: '',
				navList: [{
						text: '未使用'
					},
					{
						text: '已使用'
					},
					{
						text: '已过期'
					}
				],
				currentIndex: 0,
				couponList: [{
						money: 60,
						content: '满200可用',
						title: '达人下单可用',
						time: '2024-01-01 00:00:00到期',
						state: 1
					},
					{
						money: 60,
						content: '满200可用',
						title: '达人下单可用',
						time: '2024-01-01 00:00:00到期',
						state: 1
					},
					{
						money: 60,
						content: '满200可用',
						title: '达人下单可用',
						time: '2024-01-01 00:00:00到期',
						state: 1
					}
				],


			}
		},
		methods: {
			switchTab(index) {
				// 根据点击的索引进行相应的逻辑处理，例如切换标签页等
				this.currentIndex = index
				console.log('Switch to tab:', index);
			},

			userClick(item) {
				console.log(item)

			},
			touchStart(event) {
				// 记录触摸起始点的横坐标
				this.startX = event.touches[0].clientX;
			},
			touchMove(event) {
				// 计算滑动距离
				const currentX = event.touches[0].clientX;
				this.deltaX = currentX - this.startX;
			},
			touchEnd() {
				// 判断滑动方向
				if (this.deltaX > 50) {
					// 向右滑动逻辑   这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
					if(this.currentIndex>0){
						this.currentIndex=this.currentIndex-1
					}
				} else if (this.deltaX < -50) {
					// 向左滑动逻辑   这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
					
					if(this.currentIndex<this.navList.length-1){
						this.currentIndex=this.currentIndex+1
					}
					
				}
				// 清除触摸起始点记录，这里也可以写一些比较复杂的逻辑，每滑动一次松后执行。
			},
		}
	}
</script>

<style>
	
	.topTitle{
		display: flex;
		padding-top: 15rpx;
		align-items: center;
	}

	.nav-item {
		display: inline-block;
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.nav-item:last-child {
		margin-right: 0;
	}

	.active {
		display: inline-block;
		color: #FF9E44;
		text-align: center;
		/* Pingfang SC/Headline/Medium */
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.couponListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.xdsj {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemTime {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemState {
		color: #FF9E44;
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		position: absolute;
		right: 50rpx;
	}

	.itemImg {
		width: 85px;
		height: 85px;
		flex-shrink: 0;
	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.itemOneText {
		color:  #FF9E44;
		text-align: center;
		font-family: "DIN Alternate";
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.itemOneTextMoney {

		color: #FF9E44;
		text-align: center;
		font-family: "DIN Alternate";
		font-size: 24px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.itemTwoText {
		overflow: hidden;
		color: #FF9E44;
		text-overflow: ellipsis;
		font-family: "Alibaba PuHuiTi";
		font-size: 10px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		text-align: center;
		/* 180% */
	}

	.itemThreeText {
		margin-left: 20px;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 33px;
		text-align: center;
	}

	.moneyIcon {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-weight: 700;
	}

	.itemName {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 600;
	}

	.itemOrderTime {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
		line-height: 33px;
	}

	.bottomClass {
		flex-wrap: wrap;
		column-count: 3;
		text-align: center;
		padding: 20rpx;
		position: absolute;
		right: 0rpx;
	}

	.bottonItemClass {
		text-align: center;
		color: #040B29;
		font-family: "PingFang SC";
		font-size: 14px;
		font-weight: 400;
		padding: 10rpx;
	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.itemOneTextCenter {
		overflow: hidden;
		color: #040B29;
		text-overflow: ellipsis;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 18px;
		padding-bottom: 5px;
		/* 128.571% */
	}

	.itemTwoTextCenter {
		overflow: hidden;
		color:  #929397;
		text-overflow: ellipsis;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		padding-top: 5px;
		/* 150% */
	}

	.itemOneTextMoneyCenter {
		overflow: hidden;
		color:  #040B29;
		text-overflow: ellipsis;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 18px;
		text-align: center;
	}

	.mrpx {
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.rightUse {
		display: inline-flex;
		padding: 2px 10px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		border: 1px solid #FF9E44;
		color: #FF9E44;
		text-align: right;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.seclectIcon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.rightSeclect {
		
		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
	}
</style>